<script>
import MyBase from 'common/formComponent/MyBase';
import baseUrl from '@/utils/globalUrl.js';
import UniIcon from 'uview-ui/components/u-icon/u-icon';

export default {
  name: 'MyPositon',

  components: {
    MyBase
  },

  props: {
    title: {
      type: String,
      default: ''
    },

    disabled: {
      type: Boolean,
      default: false
    },

    icon: {
      type: String,
      default: '' // moments
    },

    isShowIconArrow: {
      type: Boolean,
      default: true
    }
  },

  data() {
    return {
      positionInfo: {}
    };
  },

  created() {
    this.getDate();
  },

  methods: {
    getDate() {
      this.$axios.get(`https://restapi.amap.com/v3/ip?&output=JSON&key=${baseUrl.gdKey}`)
        .then((response) => {
          const data = response.data;
          if (response.status === 200 && data.info === 'OK') {
            this.positionInfo = response.data;
          }
        })
        .catch(function(error) {
          console.error(error);
        });
    }
  },

  render(h) {
    const baseSlots = {
      header: () => {
        return (
          <div>
            { this.title }
          </div>
        );
      },

      content: () => {
        const { positionInfo } = this;
        const iconProps = {
          props: {
            name: 'map-fill'
          },

          style: {
            marginRight: '10px'
          }
        };
        return h('view', [
          h(UniIcon, iconProps),
          positionInfo.province + positionInfo.city
        ]);
      }
    };

    return (
      <My-Base isShowIconArrow={ this.isShowIconArrow } icon={this.icon} scopedSlots={ baseSlots }/>
    );
  }
};
</script>

<style lang="scss" scoped>
</style>
